<template>
  <div>
    <div style="border: 1px solid #ccc;padding: 10px;box-sizing: border-box;margin-top: 20px">
      <div>商品明细</div>
      <el-table
        class="toolbar"
        :header-cell-style="{background:'#2F4554',color:'#FFFFFF'}"
        :data="goodsData"
        style="width: 100%">
        <el-table-column label="商品主图" width="180">
          <template slot-scope="scope">
            <el-image style="width: 60px; height: 60px" :src="scope.row.goodsImgUrl"></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="goodsName" label="商品名称" width="180"></el-table-column>
        <el-table-column prop="productCode" label="商品编码"></el-table-column>
        <el-table-column prop="serialNumber" label="套餐编号"></el-table-column>
        <el-table-column prop="combo" label="套餐名"></el-table-column>
        <el-table-column prop="propertyName" label="规格属性"></el-table-column>
        <el-table-column prop="unitName" label="订购单位"></el-table-column>
        <el-table-column prop="goodsNum" label="购买数量"></el-table-column>
        <el-table-column prop="buyUnitPrice" label="	购买金额"></el-table-column>
        <el-table-column prop="applyNumber" label="售后申请数量"></el-table-column>
        <el-table-column prop="purchasePrice" label="售后商品购买金额" width="180px"></el-table-column>
        <el-table-column prop="applyPrice" label="申请退款金额"></el-table-column>
        <el-table-column prop="mark" label="辅料备注"></el-table-column>
      </el-table>
    </div>
    <div style="margin-top: 20px">
      <span>售后申请说明</span>
    </div>
    <div style="border: 1px solid #ccc;padding: 10px;box-sizing: border-box;margin-top: 20px">
      <div class="after-sale" style="text-align:left;padding-left:200px">
        <el-row style="margin-top: 10px;">
          <el-col :span="8">
            <span class="label">售后原因：</span>
            <span class="value">{{val_data.applyReason}}</span>
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px;">
          <el-col :span="8">
            <span class="label">申请描述：</span>
            <span class="value">{{val_data.applyDetailReason}}</span>
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px;">
          <el-col :span="8">
            <span class="label">凭证：</span>
            <span class="value"></span>
          </el-col>
        </el-row>
      </div>
    </div>
    <div style="margin-top: 20px">
      <span>商户审核信息</span>
    </div>
    <div style="border: 1px solid #ccc;padding: 10px;box-sizing: border-box;margin-top: 20px">
      <div class="after-sale" style="text-align:left;padding-left:200px">
        <el-row style="margin-top: 10px;">
          <el-col :span="8">
            <span class="label">审核时间：</span>
            <span class="value">2018-12-19 14:55:04</span>
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px;">
          <el-col :span="8">
            <span class="label">审核结果：</span>
            <span class="value">审核通过</span>
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px;">
          <el-col :span="8">
            <span class="label">是否退回商品：</span>
            <span class="value">否</span>
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px;">
          <el-col :span="8">
            <span class="label">售后单退款金额合计：</span>
            <span class="value">0.1</span>
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px;">
          <el-col :span="8">
            <span class="label">审核人备注：</span>
            <span class="value">系统自动审核</span>
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px;">
          <el-col :span="8">
            <span class="label">附件：</span>
            <span class="value"></span>
          </el-col>
        </el-row>
      </div>
    </div>
    <div v-if="dataForm.status=='1010'"
         style="border: 1px solid #ccc;padding: 10px;box-sizing: border-box;margin-top: 20px">

      <div style="margin-top: 20px;padding-left:100px" v-if="showRemark">
        <el-form
          :model="dataForm"
          label-width="160px"
          ref="dataForm"
          :rules="dataFormRules"
          size="small"
        >
          <el-form-item label="售后商品退款金额:" v-if="showApplyPrice">
            {{dataForm.applyPrice}}
          </el-form-item>
          <el-form-item label="备注:" prop="remark">
            <el-input type="textarea" v-model="dataForm.remark" style="width: 400px" auto-complete="off"></el-input>
          </el-form-item>
          <div style="padding-left:100px">
            <el-button size="mini" type="primary" round @click.native="submitForm">确认</el-button>
            <el-button size="mini" round @click.native="showRemark = false">{{$t("action.cancel") }}</el-button>
          </div>
        </el-form>
      </div>
    </div>
    <div v-if="dataForm.status=='1030'|| dataForm.status=='1040'"
         style="border: 1px solid #ccc;padding: 10px;box-sizing: border-box;margin-top: 20px">
      <div style="margin-top: 20px;padding-left:100px">
        <el-form :model="dataForm" label-width="160px" ref="dataForm" :rules="dataFormRules" size="small">
          <el-form-item label="审核时间:">
            {{dataForm.auditTime}}
          </el-form-item>
          <el-form-item label="审核结果:">
            {{dataForm.status=='1030' ? '审核通过':'审核不通过'}}
          </el-form-item>
          <el-form-item label="售后商品退款金额:">
            {{dataForm.applyPrice}}
          </el-form-item>
          <el-form-item label="备注:" prop="remark">
            {{dataForm.remark}}
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  //1010:申请退款待处理1020:取消售后1030:审核通过1040:审核拒绝1050:审核后取消售后1060:退款中1070:退款成功
  const after_sale_status = [{name: "全部", code: null}, {name: "申请退款待处理", code: 1010}, {
    name: "取消售后",
    code: 1020
  }, {name: "审核通过", code: 1030}, {name: "审核拒绝", code: 1040}, {name: "审核后取消售后", code: 1050}, {
    name: "退款中",
    code: 1060
  }, {name: "退款成功", code: 1070}];
  export default {
    props: ["orderNo", "goodsId", "afterSaleNo"],
    data() {
      return {
        showRemark: false,//是否展示审核信息
        showApplyPrice: true,//
        // 商品明细数据
        goodsData: [],
        dataForm: {
          id: "",
          remark: "",
          applyPrice: "",
          status: "",
        },
        dataFormRules: {
          remark: [{required: true, message: "请输入备注", trigger: "blur"}],
        },
        val_data: {},
        remarks: "",
        auditResult: ''
      }
    },
    watch: {
      orderNo(newV, oldV) {
        if (newV != '') {
          this.getInfo();
        }
      }
    },
    mounted() {
      // this.getInfo();
    },
    methods: {
      //审核通过
      pass: function () {
        this.showRemark = true
        this.showApplyPrice = true;
      },
      submitForm() {
        let this_=this
        this.$refs.dataForm.validate(valid => {
          if (valid) {
            this.$confirm("确认提交吗？", "提示", {}).then(() => {
              if(this.showApplyPrice){
                this.dataForm.status=1030
              }else{
                this.dataForm.status=1040
              }
              let params = Object.assign({}, this_.dataForm);
              this.utils.request.orderAfterSaleApplyUpdate(params, function (res) {
                if (res.code == "0000") {
                  this_.$message({message: "操作成功", type: "success"});
                  this_.getInfo()
                } else {
                  this_.$message({message: "操作失败, " + res.msg, type: "error"});
                }
              });
            });
          }
        });
      },
      //审核不通过
      noPass: function () {
        this.showRemark = true
        this.showApplyPrice = false;
      },
      getInfo() {
        let this_ = this;
        //获取订单商品信息
        this.utils.request.queryOrderGoodsInfo({"orderNo": this_.orderNo, "goodsId": this_.goodsId}, function (res) {
          if (res.code == "0000") {
            this_.goodsData.push(res.data)
            this_.dataForm.applyPrice = res.data.applyPrice
          }
        });

        this.utils.request.queryPageOrderAfterSaleApplyDetail({"afterSaleNo": this_.afterSaleNo}, function (res) {
          if (res.code == '0000') {
            this_.val_data = res.data;
            this_.dataForm = {
              id: res.data.id,
              remark: res.data.remark,
              applyPrice: res.data.applyPrice,
              status: res.data.status,
              auditTime:res.data.auditTime
            }
            let applyStatus = after_sale_status.find(function (statusItem, index) {
              return statusItem.code == res.data.status;
            });
            this_.val_data.auditResult = applyStatus.name;
          }
        });
      }

    }
  }
</script>

<style>
</style>
